<template>
  <div class="xtx-member-aside">
    <div class="user-manage">
      <h4>我的账户</h4>
      <div class="links">
        <router-link to="/member" exact-active-class="active">个人中心</router-link>
        <a href="javascript:;">消息通知</a>
        <a href="javascript:;">个人信息</a>
        <a href="javascript:;">安全设置</a>
        <a href="javascript:;">地址管理</a>
        <a href="javascript:;">我的积分</a>
        <a href="javascript:;">我的足迹</a>
        <a href="javascript:;">邀请有礼</a>
        <a href="javascript:;">幸运抽奖</a>
      </div>
      <h4>交易管理</h4>
      <div class="links">
        <router-link to="/member/order" active-class="active">我的订单</router-link>
        <a href="javascript:;">优惠券</a>
        <a href="javascript:;">礼品卡</a>
        <a href="javascript:;">评价晒单</a>
        <a href="javascript:;">售后服务</a>
      </div>
      <h4>我的收藏</h4>
      <div class="links">
        <a href="javascript:;">收藏的商品</a>
        <a href="javascript:;">收藏的专题</a>
        <a href="javascript:;">关注的品牌</a>
      </div>
      <h4>帮助中心</h4>
      <div class="links">
        <a href="javascript:;">帮助中心</a>
        <a href="javascript:;">在线客服</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XtxMemberAside'
}
</script>

<style lang="less" scoped>
.xtx-member-aside{
  .user-manage{
    background-color: #fff;
    width: 220px;
    border-radius: 2px;
    margin-right: 20px;
    text-align: left;
    padding-bottom: 10px;
    h4{
      display: inline-block;
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 500;
      border-top: 1px solid #f6f6f6;
      padding: 20px 0 40px 50px;
    }
    .links{
      a{
        margin-left: 50px;
        display: block;
        height: 40px;
        line-height: 40px;
        position: relative;
        &:last-child{
          margin-bottom: 10px;
        }
        &:hover{
          color: @xtxColor;
        }
        &.active{
          color: @xtxColor;
        }
        &.active::before{
          display: block;
        }
        &::before{
          position: absolute;
          content: '';
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background-color: @xtxColor;
          display: none;
          left: -20px;
          top: 38%;
        }
      }
    }
  }
}
</style>
